<template v-if="bye">
  <div class="start_work_index">
    <a-spin tip="加载中..." :spinning="workSpin">
      <div
        style="
          height: 58px;
          font-size: 20px;
          font-weight: 500;
          color: #333333;
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding-left: 10px;
          border-radius: 12px;
          line-height: 1.5;
        "
      >
        <span v-if="noticeList.length == 0" style="display: flex; align-items: center" >欢迎来到{{ appName }}短视频创作与分发平台，开启批量短视频之旅</span>
      

  <div v-if="noticeList.length > 0" style="display: flex; align-items: center; width: 78%;">
    <cu-icon
      class="icon"
      type="icon-gonggao"
      style="font-size: 20px; margin-right: 5px;"
    ></cu-icon>


    <div class="marquee">
        <div class="marquee-content">
            <span @click="viewNoticce(noticeList[0].id)" style="cursor: pointer;" class="title_blue">
            {{ noticeList[0].title }}
        </span>
        </div>
    </div>
    <span class="gonggao_more" @click="gomore">更多...</span>
  </div>
      

<!--    1.0
   <div id="app" style="width: 80%;  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center;">
    <transition name="fade" mode="out-in">
       <span v-if="noticeList.length > 0"  style="display: flex; align-items: center;">
           <cu-icon
            class="icon"
            type="icon-gonggao"
            style="font-size: 20px; margin-right: 5px;"
          ></cu-icon> 
        {{ currentNotice.title }}
          <span class="gonggao_more" @click="gomore">查看更多</span>
      </span>
        </transition>
     </div> -->

      
        <span
          style="
            margin-right: 13px;
            display: inline-block;
            height: 100%;
            display: flex;
            align-items: center;
          "
        >
          <div class="Novice-guide">
            <div
              class="Novice-guide-text clickable"
              @click="showModal()"
              style="position: relative"
            >
              新手引导
              <img
                class="Novice-guide-img"
                style="margin-left: 9px"
                src="../../../common/image/workShotstackImage/zhiyin.png"
                alt=""
              />
            </div>
          </div>
        </span>
      </div>

      <div class="myDiv_F_box">
        <div v-for="(item, index) in New_workList" :key="index" class="myDiv_F">
          <template v-if="item.h1 == '数字人克隆'">
          <img v-if="showAiHuman()" class="myDiv_F_img" :src="item.img" style="width: 100%" @click="goUrl(item.url)" />
          </template>
          <template v-else>
          <img class="myDiv_F_img" :src="item.img" style="width: 100%" @click="goUrl(item.url)" />
          </template>
          <!-- <p class="myDiv_F_h1">
            {{ item.h1 }}
          </p>
          <p class="myDiv_F_p">
            {{ item.p }}
          </p> -->

          <!-- <a-tooltip
            v-if="index == 0 && !clipRole.includes(item.clipRole)"
            placement="topLeft"
          >
            <template #title>
              <span>套餐不支持该权限</span>
            </template>
            <div class="myDiv_F_btn" :style="{ color: item.color }">
              立即体验
              <RightOutlined />
            </div>
          </a-tooltip>

          <div
            v-else
            class="myDiv_F_btn"
            :style="{ color: item.color }"
            @click="goUrl(item.url)"
          >
            立即体验
            <RightOutlined />
          </div> -->
        </div>
      </div>
    </a-spin>

    <div class="column_list">
      <div class="left_swiper">
        <div class="left_swiper_title">
          <div class="blue_s"></div>
          <div>快捷导航</div>
        </div>
        <div class="left_swiper_content">
          <div
            v-if="New_imglist"
            class="left_swiper_content_box"
            v-for="item in New_imglist"
            :key="item.id"
          >
            <a-tooltip
              v-if="
                !(clipRole.includes(item.clipRole) || item.clipRole === 'all')
              "
              placement="topLeft"
            >
              <template #title>
                <span>套餐不支持该权限</span>
              </template>
              <div style="display: flex; align-items: center">
                <img :src="item.img" alt="" style="width: 60px" />
                <div
                  class="left_swiper_content_text"
                  :style="{
                    color: item.text === '更多工具敬请期待' ? '#999' : '',
                  }"
                >
                  {{ item.text }}
                </div>
              </div>
            </a-tooltip>
            <template v-else>
              <template v-if="item.text == '智能发布'">

              <a-dropdown placement="bottom">
                <!-- @click="goUrl(item.url)" -->
              <div
                  style="display: flex; align-items: center"
                >
                  <img :src="item.img" alt="" style="width: 60px" />
                  <div
                    class="left_swiper_content_text"
                    :style="{
                      color: item.text === '更多工具敬请期待' ? '#999' : '',
                    }"
                  >
                    {{ item.text }}
                  </div>
                </div>
              <template #overlay>
                <a-menu style="margin-left: 80px">
                <a-menu-item :key="account.key" v-for="account in accountList">
                  <div class="account_item" @click="handleMenuClick(account)">
                    <img :src="account.image" alt="" /><span>{{
                      account.value
                    }}</span>
                  </div>
                </a-menu-item>
              </a-menu>
              </template>
            </a-dropdown>

              </template>

              <template v-else>
                <div
                  style="display: flex; align-items: center"
                  @click="goUrl(item.url)"
                >
                  <img :src="item.img" alt="" style="width: 60px" />
                  <div
                    class="left_swiper_content_text"
                    :style="{
                      color: item.text === '更多工具敬请期待' ? '#999' : '',
                    }"
                  >
                    {{ item.text }}
                  </div>
                </div>
              </template>

            </template>
          </div>
        </div>
      </div>

      <div class="right_data data_overflow">
        <div class="top_con">
          <div class="top_con_left">
            <div class="blue_s"></div>
            <div class="left_title">
              <div class="one">数据总览</div>
              <div class="two">
                <a-tooltip>
                  <template #title>
                    <div>当前页作品数据来源&lt;创作者中心-数据中心-经营分析&gt;</div>
                    <div>“近30天“短视频数据；若抖音账号未开通&lt;数据中心&gt;则部分数据为0。</div> 
                    <div>统计的数据不包含当天。</div>
                    </template>
                  <question-circle-outlined style="margin-left: 3px" />
                </a-tooltip>
              </div>
              <div class="three">
                <a-tooltip placement="top">
                  <template #title>
                    <span
                      >点我进行手动拉取最新数据，建议操作不要频繁，避免封号</span
                    >
                  </template>
                  <a-button
                    type="text"
                    :loading="pull_loading"
                    @click="debouncedpull_list"
                  >
                    <template #icon>
                      <redo-outlined />
                    </template>
                  </a-button>
                </a-tooltip>

                <!-- <redo-outlined @click="debouncedpull_list" /> -->
              </div>
            </div>
          </div>
          <div class="right_choose">
            <div class="left_tab">
              <!-- <a-col>
								<a-button type="text" shape="round" :class="item.key == btnItem ? 'btn-bg' : ''"
									v-for="item in btnList" :key="item.key"
									@click="btnClick(item.key)">{{ item.title }}</a-button>
							</a-col> -->
            </div>
            <div class="right_tab">
              <a-row class="date-list">
                <a-col
                  :span="6"
                  v-for="item in dateList"
                  :key="item.key"
                  :class="item.key == dateKey ? 'date-btn' : ''"
                  @click="dateClick(item.key)"
                >
                  {{ item.title }}
                </a-col>
              </a-row>
            </div>
          </div>
        </div>

        <div class="main_con" v-if="staticList?.length">
          <div
            class="static_item"
            v-for="(item, index) in staticList"
            :key="index"
          >
            <div class="static_item_box">
              <div class="static_item_left">
                <img :src="item.URL" alt="" style="width: 50px" />
              </div>
              <div class="static_item_right">
                <div class="static_title">
                  {{ item.label }}
                  <a-tooltip v-if="item.label == '账号总数'">
                    <template #title>统计矩阵账号总数</template>
                    <question-circle-outlined style="margin-left: 3px" />
                  </a-tooltip>
                  <a-tooltip v-if="item.label == '总粉丝数'">
                    <template #title>统计矩阵账号的粉丝数量</template>
                    <question-circle-outlined style="margin-left: 3px" />
                  </a-tooltip>
                  <a-tooltip v-if="item.label == '素材使用量'">
                    <template #title>统计成片视频使用素材的总量</template>
                    <question-circle-outlined style="margin-left: 3px" />
                  </a-tooltip>
                  <a-tooltip v-if="item.label == '视频播放量'">
                    <template #title>统计发布到平台视频的播放总量</template>
                    <question-circle-outlined style="margin-left: 3px" />
                  </a-tooltip>
                  <a-tooltip v-if="item.label == '成片使用率'">
                    <template #title
                      >成片使用率= 总视频发布数/成片总数</template
                    >
                    <question-circle-outlined style="margin-left: 3px" />
                  </a-tooltip>
                </div>
                <div class="static_value">
                  {{
                    dateKey == 0
                      ? item.value?.yesterday
                      : dateKey == 1
                      ? item.value?.week
                      : dateKey == 3
                      ? item.value?.all
                      : item.value?.month
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main_con" v-else>
          <div class="no_data">数据加载中</div>
        </div>
      </div>
    </div>

    <div class="New_column_list">
      <div class="New_column_list_Top">
        <div class="New_column_list_Top_left">
          <span class="blue_s"></span>
          <div>创作参考</div>
        </div>
        <div class="New_column_list_Top_right" @click="goUrl('TemplateList')">
          查看更多
          <RightOutlined />
        </div>
      </div>

      <div class="New_column_list_Content">
        <span
          class="LeftCircleOutlined"
          @click="previousPage"
          v-if="MorkList.length > pageSize"
          :style="{
            color:
              currentPageIndex === 0 || MorkList.length <= pageSize
                ? '#999'
                : '#88b4fd',
          }"
        >
          <LeftCircleOutlined />
        </span>
        <!-- -->
        <div
          class="New_card"
          v-for="(item, index) in getVisibleItems"
          :key="index"
          @mouseenter="showVideo(item, $event)"
          @mouseleave="hideVideo(item, $event)"
          :style="{
            backgroundImage:
              targetVideo === item.id && currentVideo === item.id
                ? 'none'
                : `url(${item.thumb_url ? item.thumb_url : item.img})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }"
        >
          <div class="horver_btn">
            <a-button
              v-if="clipRole.includes('sphj')"
              class="input-button"
              size="small"
              type="primary"
              style="border-radius: 5px"
              @click="gohunjian(item)"
              >使用</a-button
            >
          </div>
          <div class="overlay">
            <div class="overlay_one">{{ item.title }}</div>
            <div class="overlay_two">{{ item.type }}</div>
          </div>
          <!-- <div>{{ item }}</div> -->
          <div
            v-show="targetVideo == item.id && currentVideo == item.id"
            class="video-overlay"
          >
            <video :src="item.material_url" muted></video>
          </div>
        </div>
        <span
          class="RightCircleOutlined"
          @click="nextPage"
          v-if="MorkList.length > pageSize"
          :style="{
            color:
              currentPageIndex + pageSize >= MorkList.length
                ? '#999'
                : '#88b4fd',
          }"
        >
          <RightCircleOutlined />
        </span>
      </div>
    </div>
    <div class="footer">
      <span>
        <a-row :gutter="[16,16]">
          <a-col>
            <a target="_blank" :href="useAgreementUrl">用户服务条款</a>
          </a-col>
          <a-col>
            <a target="_blank" :href="privacyAgreementUrl">隐私协议</a>
          </a-col>
        </a-row>
      </span>
      <span v-if="basicData.system_name" style="margin:0 10px">
        Copyright©{{ basicData.system_name }}
      </span>
      <span v-if="basicData.system_domain_icp">
        工信部备案号:
      </span>
      <a
        @click="openUrl('https://beian.miit.gov.cn/')"
        style="margin-right: 5px;margin-left: 10px"
        v-if="basicData.system_domain_icp"
        >{{ basicData.system_domain_icp }}</a
      >
      <span v-if="basicData.system_domain_police">
        公安部网络安全备案号：
      </span>
      <a
        @click="openUrl('https://beian.mps.gov.cn/#/query/webSearch')"
        v-if="basicData.system_domain_police"
        >{{ basicData.system_domain_police }}</a
      >
    </div>

    <!-- 新建剪辑 -->
    <NewClip
      :visible="newClipVisible"
      :data="clipData"
      @onCancel="newClipVisible = false"
      @onSubmit="newClipVisible = false"
    />

    <!-- 弹框登录 -->
    <ShotstackLoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />

    <a-modal :visible="open" @cancel="handleClose" :footer="null" :width="560">
      <template #title>
        <div class="custom-title">
          <span>新手引导</span>

          <a-button
            class="custom-title-blue"
            type="text"
            @click="getModelList()"
          >
            <LoadingOutlined v-if="LoadingModel" style="margin-left: 10px" />

            <div v-else>
              <SyncOutlined style="margin-right: 5px" />
              <span>状态刷新</span>
            </div>
          </a-button>
        </div>
      </template>

      <div class="custom-box" v-for="item in showModalList" :key="index">
        <div class="custom-box-left">
          <div class="custom-box-left-img">
            <img
              :src="item.icon"
              alt=""
              style="border: 0; padding: 0; margin: 0; width: 50px"
            />
          </div>
          <div class="custom-box-left-text">
            <div class="one">
              <div class="one-title">{{ item.title }}</div>
            </div>
            <div class="two" style="font-size: 15px; color: #828282">
              <span>
                {{ item.content.text_1 }}
              </span>
              <span class="two-url" @click="$router.push({ name: item.url })">
                {{ item.content.url }}
              </span>
              <span>
                {{ item.content.text_2 }}
              </span>
            </div>
          </div>
        </div>

        <div class="custom-box-right" style="font-size: 14px; margin-top: 25px">
          <div style="color: #ff0000" v-if="item.status == 0">
            <CloseCircleOutlined />
            未完成
          </div>
          <div style="color: #02b427" v-else>
            <CheckCircleOutlined />
            已完成
          </div>
        </div>
      </div>

      <!-- 弹框登录 -->
      <SSLoginModal
        v-model:visible="loginVisible"
        @onClose="handleCloseLoginModal"
        @loginCallback="loginCallback"
      />

      <!-- <template #footer 
			style="padding: none !important;
	         border-top: none !important;">
			</template> -->
    </a-modal>
  </div>

  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

        <!-- Modal 对话框 -->
        <a-modal
        v-model:visible="isModalVisible"
        title="请选择抖音发布方式"
        :maskClosable="false"
        :mask="true"
      >
        <template #footer>
          <a-button key="qr_code" @click="handleModelQrCode">
            <template #icon><QrcodeOutlined /></template>
            扫码发布</a-button
          >
          <a-button key="api" type="primary" @click="handleModelAPI">
            <template #icon><CloudSyncOutlined /></template>
            立即发布</a-button
          >
        </template>
        <p>
          <span style="font-size: 16px; font-weight: bold"
            >发布方式说明：目前抖音矩阵同时支持2种发布方式。</span
          >
          <br />
          <span
            ><b>扫码发布：</b
            ><br />需要对应账号配合的发布方式，从手机端打开抖音扫码完成发布。</span
          ><br />
          <span
            ><b>立即发布：</b
            ><br />需要先下载客户端进行扫码授权登录，然后发布的时候选择在线账号再进行自动发布。</span
          >
        </p>
      </a-modal>
</template>

<script>
import {
  reactive,
  toRefs,
  defineComponent,
  computed,
  watch,
  onMounted,
  nextTick,
  ref
} from "vue";
import request from "../../../common/utils/request";
import { useRoute, useRouter } from "vue-router";
import NewClip from "../Workbenche/modules/NewClip.vue";
import utils from "../../../common/utils/utils";
import dayjs from "dayjs";
import store from "@/store/index";
import SSLoginModal from "@/components/ShotstackLoginModal/index.vue";
import { onBeforeRouteLeave } from "vue-router";
import { debounce } from "lodash";
import vipModal from '@/socialMedia/Vip/vipModal.vue'
import {
  CloseCircleOutlined,
  CheckCircleOutlined,
  SyncOutlined,
  LoadingOutlined,
  RightOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  QuestionCircleOutlined,
  RedoOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "StartWork",
  components: {
    vipModal,
    NewClip,
    CloseCircleOutlined,
    CheckCircleOutlined,
    SyncOutlined,
    LoadingOutlined,
    RightOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    QuestionCircleOutlined,
    RedoOutlined,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    // 获取所有路由信息
    const allRoutes = router.getRoutes();

    // 充值弹窗
    const vipModalRef = ref(null)
    const vipVisible = ref(false)

    // 当前时间
    const currentDate = computed(() => {
      return dayjs().format("YYYY-MM-DD HH:mm:ss");
    });
    // const clipRole = computed(() => store.state.user?.clipRole || []);

    const token = computed(() => {
      return utils.getUserToken();
    });
    // 权限数据
    const clipRole = computed(() => store.state.user?.clipRole || []);
    // 是否有 抖音的配置
    const hasDyConfig = store?.state?.shotstack?.work_ai_config?.hasDyConfig || false;

    const appName =ref('');
 
    const state = reactive({
      noticeWrapper: null,
      intervalId: null,
      noticeContainer: null,
      pull_loading: false,
      bye: true,
      timeOutId: null,
      cleartargetVideo: null,
      currentVideo: null,
      targetVideo: null,
      hoveredIndex: null,
      LoadingModel: false,
      showModalList: [],
      open: false,
      nofinish: 0,
      count: 0,
      workList: [],
      currentIndex: 0,
      currentPageIndex: 0,
      pageSize: 8,
      cardHovered: false,
      buttonHovered: false,
      loginVisible: false,
      // 发布平台列表
      accountList: [],
      // 抖音发布方式弹窗
      isModalVisible:false,

      New_workList: [
        {
          img:
            utils.staticPath + "images/workAi/shotstack/new_pilianghunjian.webp",
          url: "MixedCutIntroduction",
          color: "#2958e0",
          h1color: "linear-gradient(135deg, #5948f1 0%, #3379ef 100%)",
          pcolor: "#424f6b",
          clipRole: "sphj",
          h1: "批量视频混剪",
          p: "批量剪辑(一天批量剪辑1000个视频),一键定时发布",
        },
        {
          img:
            utils.staticPath + "images/workAi/shotstack/new_shu.webp",
          h1color: "linear-gradient(135deg, #25cff1 0%, #399efc 100%)",
          pcolor: "#12243e",
          url: "AIdigitalHuman",
          color: "rgb(0 173 149)",
          text: "1",
          clipRole: "",
          h1: "数字人克隆",
          p: "新一代数字人克隆技术，快速克隆您的声音和形象",
        },
        {
          img:
            utils.staticPath +
            "images/workAi/shotstack/new_juzheng.webp",
          h1color: "linear-gradient(135deg, #efa84b 0%, #ec9144 100%)",
          pcolor: "#3e2211",
          color: "#fc7237",
          url: "IpManage",
          text: "1",
          clipRole: "",
          h1: "矩阵发布",
          p: "一人管理500+账号, 一键发布, 支持挂在POI",
        },
        {
          img:
            utils.staticPath +
            "images/workAi/shotstack/new_pinlun.webp",
          h1color: "linear-gradient(135deg, #efa84b 0%, #ec9144 100%)",
          pcolor: "#3e2211",
          color: "#6b5cfb",
          url: "CommentMessageConnect",
          // connect
          text: "1",
          clipRole: "",
          h1: "评论私信",
          p: "一个界面同时管理多账号抖音评论（支持个人号）和私信",
        },
      ],
      New_imglist: [
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/materia_icon.png",
          url: "MaterialList",
          text: "素材管理",
          clipRole: "all",
          id: "1",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/jzsq.png",
          url: "IpManage",
          text: "矩阵授权",
          clipRole: "all",
          id: "2",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/znfb.png",
          url: "AutoRelease",
          text: "智能发布",
          clipRole: "all",
          id: "3",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/jjcp.png",
          url: "ComposeMaterial",
          text: "剪辑成片",
          clipRole: "all",
          id: "4",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/bdm.png",
          url: "BurstShop",
          text: "爆店码",
          clipRole: "all",
          id: "5",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home//walb.png",
          url: "TextImitation",
          text: "文案裂变",
          clipRole: "all",
          id: "6",
        },
      {
          img:
            utils.staticPath + "images/workAi/shotstack/home/mbjj.png",
          url: "TemplateList",
          text: "模板剪辑",
          clipRole: "all",
          id: "7",
        },
      {
        img:
          utils.staticPath + "images/workAi/shotstack/home/dyseo.png",
        url: "KeywordThesaurus",
        text: "抖音SEO",
        clipRole: "all",
        id: "8",
      },
      {
          img: utils.staticPath + "images/workAi/shotstack/home/filmUpload.png",
          url: "上传成片",
          text: "上传成片",
          clipRole: "all",
          id: "9",
        },
      // {
      //     img: utils.staticPath + "images/workAi/shotstack/home/more_icon.png",
      //     url: "",
      //     text: "更多工具敬请期待",
      //     clipRole: "all",
      //     id: "9",
      //   },




        // {
        //   img: utils.staticPath + "images/workAi/shotstack/home/video_icon.png",
        //   url: "AddVideoIntelligentSplit",
        //   text: "视频拆分",
        //   clipRole: "sphj",
        //   id: "1",
        // },
        // {
        //   img:
        //     utils.staticPath + "images/workAi/shotstack/home/language_icon.png",
        //   url: "TextToSpeech",
        //   text: "多语言AI配音",
        //   clipRole: "wzzyy",
        //   id: "2",
        // },
        // {
        //   img:
        //     utils.staticPath +
        //     "images/workAi/shotstack/home/characters_icon.png",
        //   url: "VideoToTextList",
        //   text: "视频提取文字",
        //   clipRole: "tqspwz",
        //   id: "3",
        // },
        // {
        //   img:
        //     utils.staticPath +
        //     "images/workAi/shotstack/home/management_icon.png",
        //   url: "Index",
        //   text: "员工管理",
        //   clipRole: "Index",
        //   id: "4",
        // },
        // {
        //   img: utils.staticPath + "images/workAi/shotstack/home/wenan_icon.png",
        //   url: "SceneCenter",
        //   text: "文案创作",
        //   clipRole: "aicz",
        //   id: "5",
        // },

        // {
        //   img: utils.staticPath + "images/workAi/shotstack/home/send_icon.png",
        //   url: "ReleaseList",
        //   text: "发布设置",
        //   clipRole: "all",
        //   id: "7",
        // },
        // {
        //   img: utils.staticPath + "images/workAi/shotstack/home/upload.png",
        //   url: "ComposeMaterial",
        //   text: "上传成片",
        //   clipRole: "all",
        //   id: "7",
        // },
 
      ],
      MorkList: [],
      workSpin: false,
      bannerList: [],
      noticeList: [],
      statisticData: {},
      newClipVisible: false,
      clipData: {},
      courseList: [],
      noticeSpin: false,
      courseSpin: false,
      loginVisible: false,
      btnItem: 0,
      btnList: [
        {
          title: "剪辑数据",
          key: 0,
        },
        {
          title: "矩阵剪辑",
          key: 1,
        },
      ],
      dateKey: 3,
      dateList: [
        {
          title: "昨日",
          key: 0,
        },
        {
          title: "7天",
          key: 1,
        },
        {
          title: "30天",
          key: 2,
        },
        {
          title: "全部",
          key: 3,
        },
      ],
      staticList: [],
      clipRole: [],
      isAIdigitalHuman: false,
      currentNotice: null,
      currentIndex: 0,
      basicData:{},
      aiConfig:{}
    });

    const showVideo = (item, event) => {
      const videoElement = event.target
        .closest(".New_card")
        .querySelector("video");
      videoElement.currentTime = 0;
      // 移除上次的定时器
      clearTimeout(state.cleartargetVideo);
      // 上一次加载的视频 就是这个视频
      if (state.targetVideo && state.targetVideo == item.id) {
        // 取消鼠标离开时的清空
        state.currentVideo = item.id;
        if (videoElement.readyState >= 1) {
          // 已经有足够数据可以播放
          videoElement.play();
        } else {
          videoElement.addEventListener(
            "loadeddata",
            () => {
              videoElement.play();
            },
            { once: true }
          );
        }
      } else {
        // 是其他视频, 延迟播放
        state.currentVideo = item.id;
        state.timeOutId = setTimeout(() => {
          state.targetVideo = item.id;

          // 当前可以播放
          if (videoElement && videoElement.readyState >= 1) {
            videoElement.play();
          } else {
            // 侦听加载完毕事件, 并开始播放
            videoElement.addEventListener(
              "loadeddata",
              () => {
                // 如果当前用户鼠标没有移动
                if (state.targetVideo && state.targetVideo === item.id) {
                  videoElement.play();
                }
              },
              { once: true }
            );
          }
        }, 500);
      }
    };

    const hideVideo = (item, event) => {
      clearTimeout(state.timeOutId);
      state.timeOutId = null;
      // 延迟清除展示video的变量
      state.currentVideo = null;
      // 清空上一个定时器
      state.cleartargetVideo && clearTimeout(state.cleartargetVideo);
      // 开启一个新的定时器
      state.targetVideo &&
        (state.cleartargetVideo = setTimeout(() => {
          state.targetVideo = null;
          state.cleartargetVideo = null;
        }, 1000));
      const videoElement = event.target
        .closest(".New_card")
        .querySelector("video");
      videoElement.pause();
    };

    const getVisibleItems = computed(() => {
      // 如果数据长度不超过8条，直接返回原数组
      if (state.MorkList.length <= state.pageSize) {
        return state.MorkList;
      }
      // 确定当前页的起始和结束索引
      const startIndex = state.currentPageIndex;
      const endIndex = Math.min(
        startIndex + state.pageSize,
        state.MorkList.length
      );
      return state.MorkList.slice(startIndex, endIndex);
    });

    const previousPage = () => {
      if (state.currentPageIndex > 0) {
        state.currentPageIndex--;
      }
    };

    const nextPage = () => {
      if (state.currentPageIndex + state.pageSize < state.MorkList.length) {
        state.currentPageIndex++;
      }
    };

    const getWorkList = () => {
      state.workSpin = true;
      request
        .get("/work_ai", "/user/shotstack/work/list")
        .then((res) => {
          state.workSpin = false;
          state.workList = res.result;
        })
        .catch(() => {
          state.workSpin = false;
        });
    };

    const workClick = (data) => {
      if (!state.clipRole.includes(data.role) && data?.role) return;
      if (data?.key === "AddVideoIntelligentSplit") {
        router.push({
          path: "addVideoIntelligentSplit",
        });
      }
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (data.key.includes("_")) {
          router.push({
            name: "AiCreate",
            query: {
              pluginId: data.key.split("_")[1],
              isWork: true,
            },
          });
          return;
        }
        //智能剪辑
        if (data.key == "ScriptLine") {
          state.clipData = {
            editModel: 4,
            type: "video",
          };
          state.newClipVisible = true;
          return;
        }
        //智能剪辑
        if (data.key == "Clip") {
          state.clipData = {
            editModel: 1,
            type: "video",
          };
          state.newClipVisible = true;
          return;
        }
        //一键成片
        if (data.key == "ScriptLine") {
          state.clipData = {
            editModel: 2,
            type: "video",
          };
          state.newClipVisible = true;
          return;
        }
        router.push({
          name: data.key,
        });
      });
    };

    // 轮播
    const getBannerList = () => {
      utils.checkLogin().then((isLogin) => {
        if (isLogin) {
          request.get("/work_ai", "/user/shotstack/banner/list").then((res) => {
            state.bannerList = res.result;
          });
        }
      });
    };

    // 图片跳转
    const imageClick = (data) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (data.content_type == 1) {
          if (!data.content) return;
          window.open(data.content);
        }
        if (data.content_type == 0) {
          window.open(
            `${window.location.origin}/custom/textPreview?id=${data.id}&type=banner`
          );
        }
      });
    };

    // 公告
    const getNoticeList = () => {
      utils.checkLogin().then((isLogin) => {
        if (isLogin) {
          state.noticeSpin = true;
          request
            .get("/work_ai", "/user/shotstack/notice/list")
            .then((res) => {
              state.noticeList = res.result.filter((item, index) => index < 5);

              console.log(state.noticeList, 'dwqdqwdwdw');
              
              // startNoticeLoop();

      //          setTimeout(() => {
      //   setInterval(changeNotice, 6000); // 每条通知显示3秒，加上滚动时间约为3秒
      // }, 3000); // 初始化时停留3秒
              state.noticeSpin = false;
            })
            .catch(() => {
              state.noticeSpin = false;
            });
        }
      });
    };

    // 查看更多
    const goNotice = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        router.push({
          name: "NoticeList",
        });
      });
    };
    
    const viewNoticce = (id) => {
      window.open(
        `${window.location.origin}/custom/textPreview?id=${id}&type=notice`
      );
    };


    // 公告详情
    const noticeClick = ({ id }) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        window.open(
          `${window.location.origin}/custom/textPreview?id=${id}&type=notice`
        );
      });
    };

    // 统计
    const getWorkStatistic = () => {
      request.get("/work_ai", "/user/shotstack/work/statistic").then((res) => {
        state.statisticData = res.result;

        let obj = {
          month:
            (
              (res.result.film_release_num.month / res.result.film_num.month) *
              100
            ).toFixed(2) + "%",
          week:
            (
              (res.result.film_release_num.week / res.result.film_num.week) *
              100
            ).toFixed(2) + "%",
          yesterday:
            (
              (res.result.film_release_num.yesterday /
                res.result.film_num.yesterday) *
              100
            ).toFixed(2) + "%",
        };

        state.staticList = [
          {
            label: "总播放量",
            value: res.result.read_num,
            URL:
              utils.staticPath +
              "images/workAi/shotstack/video_fabu_icon@2x.png",
          },
          {
            label: "视频评论",
            value: res.result.comment_num,
            URL:
              utils.staticPath + "images/workAi/shotstack/home/tell_tell.png",
          },
          {
            label: "矩阵视频",
            value: res.result.film_release_num,
            URL:
              utils.staticPath + "images/workAi/shotstack/article_icon@2x.png",
          },
          {
            label: "管理账号",
            value: res.result.account_num,
            URL:
              utils.staticPath + "images/workAi/shotstack/account_icon@2x.png",
          },
          {
            label: "成片视频",
            value: res.result.film_num,
            URL:
              utils.staticPath +
              "images/workAi/shotstack/home/finsish_video.png",
          },
          {
            label: "总粉丝数",
            value: res.result.fans_num,
            URL: utils.staticPath + "images/workAi/shotstack/fensi_icon@2x.png",
          },
          {
            label: "成片使用率",
            value: res.result.film_release_rate,
            URL:
              utils.staticPath + "images/workAi/shotstack/chengp_icon@2x.png",
          },
          {
            label: "素材使用量",
            value: res.result.multimedia_use_num,
            URL:
              utils.staticPath + "images/workAi/shotstack/reading_icon@2x.png",
          },
          {
            label: "员工总数",
            value: res.result.team_user_num,
            URL: utils.staticPath + "images/workAi/shotstack/staff_icon@2x.png",
          },
          // {
          //   label: "成片使用率",
          //   value: obj,
          //   URL:
          //     utils.staticPath + "images/workAi/shotstack/article_icon@2x.png",
          // },
        ];
      });
    };

    // 热门课程
    const getCourseList = () => {
      utils.checkLogin().then((isLogin) => {
        if (isLogin) {
          state.courseSpin = true;
          request
            .get("/work_ai", "/user/shotstack/course/list", {
              is_hot: 1,
            })
            .then((res) => {
              state.courseList = res.result.filter((item, index) => index < 4);
              state.courseSpin = false;
            })
            .catch(() => {
              state.courseSpin = false;
            });
        }
      });
    };

    // 查看更多
    const goCourse = () => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        router.push({
          name: "LearningCenter",
        });
      });
    };

    const gomore = () => {
       router.push({
          name: "NoticeList",
        });
    }

    // 课程详情
    const courseClick = (data) => {
      utils.checkLogin().then((isLogin) => {
        if (!isLogin) {
          state.loginVisible = true;
          return;
        }
        if (data.content_type == 1) {
          window.open(data.content);
        }
        if (data.content_type == 0) {
          window.open(
            `${window.location.origin}/custom/textPreview?id=${data.id}&type=course`
          );
        }
      });
    };

    const btnClick = (key) => {
      state.btnItem = key;
    };

    const dateClick = (key) => {
      state.dateKey = key;
    };

    // 登录回调
    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    watch(
      () => store.state.user?.clipRole,
      (val) => {
        if (val) {
          state.clipRole = val;
        } else {
          state.clipRole = [];
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );

    const init = () => {
      getWorkList();
      getBannerList();
      getNoticeList();
      getWorkStatistic();
      getCourseList();
    };
    init();

    const handleCloseLoginModal = () => {
      state.loginVisible = false;
    };

    const handleClose = () => {
      state.open = false;
    };

    const getModelList = () => {
      state.LoadingModel = true;
      request.get("/work_ai", "/user/shotstack/newbie_task").then((res) => {
        state.LoadingModel = false;
        if (res && res?.result && res.result?.task) {
          state.showModalList = res.result.task;
          state.nofinish = res.result.task_num;
        }
      });
    };

    const showModal = async () => {
      const isLogin = await utils.checkLogin();
      if (!isLogin) {
        state.loginVisible = true;
        return;
      }
      state.open = true;
      getModelList();
    };

    // 去某个页面
    const goUrl = async (data) => {
      const isLogin = await utils.checkLogin();
      if (!isLogin) {
        state.loginVisible = true;
        return;
      }
      if (data == "ComposeMaterial") {
        router.push({
          name: data,
          // query: {
          //   upload: "2",
          // },
        });
      } else if (data == "AutoRelease") {
        router.push({
          name: data,
          query: {
          platform: "douyin",
          type: "api",
        },
        });
      } else if (data == "上传成片") {
        router.push({
          name: 'ComposeMaterial',
          query: {
            activeKey:'2'
          // platform: "douyin",
          // type: "api",
        },
        });
      } else {
        router.push({ name: data });
      }
    };

    // 获取模板列表
    const gettemplateList = async () => {
      const res = await request.get(
        "/work_ai",
        "/user/shotstack/template/list",
        {
          tag_id: [],
          aspect_ratio: "0",
          material_number: "0",
          material_duration: "0",
          type: "0",
        }
      );
      res.result.forEach((v1) => {
        state.MorkList.push({
          img: v1.poster_url, // 次选封面图
          thumb_url: v1.thumb_url, // 首选封面图
          material_url: v1.material_url, // 视频素材  播放
          title: v1.name,
          id: v1.id,
        });
      });
      state.MorkList.map((item) => ({
        ...item,
        buttonHovered: false,
      }));
    };
    // 使用去混剪
    const gohunjian = async (item) => {
      const isLogin = await utils.checkLogin();

      if (!isLogin) {
        state.loginVisible = true;
        return;
      }
      router.push({
        path: "/mixedCutCreat",
        query: {
          id: item.id, // 详情id
          key: "id", // 获取详情的id键名
          viewType: 1, // 从哪个页面带过来（1：模板广场, 2：视频混剪）
          templateType: 1, // 用于区分查看模板详情的类型 1为我的模板 2为模板广场
          useType: "use", // 用于区分模板使用的类型 edit 编辑 view 详情 use使用
        },
      });
    };

    // 刷新
    const pull_list = async () => {
      state.pull_loading = true;
      const res = await request.get("/work_ai", "/user/shotstack/video/pull");

      if (res.result) {
        state.pull_loading = false;
        message.success("刷新成功!");
        getWorkStatistic();
      }
    };

    const debouncedpull_list = debounce(pull_list, 1000, {
      leading: true,
      trailing: false,
    });

    const checkRouteExists = () => {
      const route = allRoutes.find((r) => r.name === "AIdigitalHuman");
      state.isAIdigitalHuman = !!route;
    };

    checkRouteExists();

    watch(
      () => state.isAIdigitalHuman,
      (val) => {
        if (val == false) {
          state.New_workList = state.New_workList.filter(
            (item) => item.url !== "AIdigitalHuman"
          );
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );

    const intervalId = ref(null); // 存储定时器 ID

    const startNoticeLoop = () => {
      showNextNotice();
      intervalId.value = setInterval(showNextNotice, 3000); // 设置 3 秒间隔的定时器
    };

    const stopNoticeLoop = () => {
      if (intervalId.value) {
        clearInterval(intervalId.value);
        intervalId.value = null;
      }
    };

    const showNextNotice = () => {
      if ( state.noticeList.length === 0) return;

      state.currentNotice =  state.noticeList[state.currentIndex];
      state.currentIndex = (state.currentIndex + 1) %  state.noticeList.length; // 循环索引
    };

    // ------------------------------------------------------

    const startScrolling = () => {
      if (!state.noticeContainer) return;

      const containerWidth = state.noticeContainer.offsetWidth;
      const parentWidth = state.noticeContainer.parentElement.offsetWidth;


      let position = parentWidth;
      state.intervalId = setInterval(() => {
        position -= 2; // 滚动速度，可以根据需要调整
        if (position < -containerWidth) {
          position = parentWidth;
        }
        if (state.noticeContainer) {
          state.noticeContainer.style.transform = `translateX(${position}px)`;
          
        }
      }, 16); // 约等于每秒60帧的动画效果
    };

    const stopScrolling = () => {
      clearInterval(state.intervalId);
      state.intervalId = null;
    };

    // const changeNotice = () => {
    //   state.currentIndex = (state.currentIndex + 1) % state.noticeList.length;
    //   stopScrolling();
    //   resetPosition();
    //   setTimeout(startScrolling, 3000); // 每条通知显示3秒后开始滚动
    // };

    const resetPosition = () => {
      if (state.noticeContainer) {
        state.noticeContainer.style.transform = 'translateX(0)';
      }
    };

     const changeNotice = () => {
      state.currentIndex  = (state.currentIndex + 1) % state.noticeList.length;
      // 重置动画以重新开始
      if (state.noticeWrapper) {
        state.noticeWrapper.style.animation = 'none';
        void state.noticeWrapper.offsetWidth; // 触发重绘
        state.noticeWrapper.style.animation = null;
      }
    };

    // const containerStyle = computed(() => ({
    //   display: 'flex',
    //   alignItems: 'center',
    //   whiteSpace: 'nowrap',
    //   transition: 'transform 0.5s ease-in-out'
    // }));

    const openUrl = (url) => {
      window.open(url, "_blank");
    };

    // 获取发布成片平台下拉列表
    const getAccountList = async() => {
     const res = await request
        .get("/work_ai", "/org/platform/account/shotStackList", {
          filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
        })
        console.log(res.result);
        state.accountList = res.result;
    };

       // 跳转页面  / 判断
       const handleMenuClick = (e) => {
      if (e?.developing == 1) return message.warning("功能开发中");

      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true;
        return
      }  
        if (clipRole.value.length !== 0) {
          if (e.key == "douyin" && hasDyConfig) {
            state.isModalVisible = true;
            return;
          }

          router.push({
            name: "AutoRelease",
            query: {
              platform: e.key,
            },
          });
        } else {
          message.warn("暂无套餐");
        }
    }

    // 抖音发布弹窗
    const handleModelAPI = () => {
      state.isModalVisible = false;
      router.push({
        name: "AutoRelease",
        query: {
          platform: "douyin",
          type: "api",
        },
      });
    };

    // 扫码发布
    const handleModelQrCode = () => {
      state.isModalVisible = false;
      router.push({
        name: "AutoRelease",
        query: {
          platform: "douyin",
          type: "qr_code",
        },
      });
    };

    let baseUrl = request.BASE_URL;
    const useAgreementUrl=computed(()=>{
      if(import.meta.env.ELECTRON){
        return import.meta.env.VITE_SITE_URL + '/UseAgreement'
      }else{
        return baseUrl + '/UseAgreement'
      }
    })

    
    const privacyAgreementUrl=computed(()=>{
      if(import.meta.env.ELECTRON){
        return import.meta.env.VITE_SITE_URL + '/PrivacyAgreement'
      }else{
        return baseUrl + '/PrivacyAgreement'
      }
    })

    onMounted(() => {
      nextTick(() => {
        store.dispatch("GetConfigInfo").then((config) => {
              state.basicData =config.basic
              store.dispatch("getAiConfig").then((aiConfig) => {
                appName.value = aiConfig?.site_name
                state.aiConfig = aiConfig
                if(utils.getUserToken()){
                  getAccountList()
                  getModelList();
                }
                store.dispatch("GetClipRoleList");
                gettemplateList();
              });
        })
        if (!token.value) {
          state.loginVisible = true;
        }
      });
    })

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false;
      next(true);
    });

    const aiConfig = computed(() => {
      return store.state.shotstack.work_ai_config
    })

    const showAiHuman = () => {
      const hasDigital = aiConfig.value?.hasDigital || false;
      console.log(hasDigital,'有没有数字人权限');
      return hasDigital
    }

    return {
      aiConfig,
      vipModalRef,
      vipVisible,
      clipRole,
      showAiHuman,
      handleModelQrCode,
      handleModelAPI,
      handleMenuClick,
      getAccountList,
      hideVideo,
      showVideo,
      handleCloseLoginModal,
      handleClose,
      getModelList,
      showModal,
      gohunjian,
      ...toRefs(state),
      workClick,
      imageClick,
      courseClick,
      noticeClick,
      goCourse,
      goNotice,
      viewNoticce,
      currentDate,
      loginCallback,
      btnClick,
      dateClick,
      getVisibleItems,
      token,
      goUrl,
      previousPage,
      nextPage,
      pull_list,
      debouncedpull_list,
      gomore,
      appName,
      openUrl,
      useAgreementUrl,
      privacyAgreementUrl
    };
  },
});
</script>

<style lang="less" scoped>
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 隐藏水平滚动条，避免其占用空间 */
}


    // 发布成片下拉样式
    .account_item {
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 3px, 10px;
    img {
      margin-right: 5px;
      width: 20px;
      height: 20px;
    }
  }

.no_data {
  color: #999;
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.carousel {
  :deep(.slick-slide) {
    background: none;
    border-radius: 16px !important;
  }

  .ss-carousel :deep(.slick-slide) {
    text-align: center;
    overflow: hidden;
  }

  .ss-carousel :deep(.slick-slide h3) {
    color: #fff;
  }

  .ss-carousel .slick-slide img {
    height: 314px;
    object-fit: cover;
    object-position: center;
  }

  :deep(.ss-carousel .slick-dots li button) {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    color: transparent;
    font-size: 0;
    background: #fff;
    border: 0;
    outline: none;
    cursor: pointer;
    /* opacity: 0.3; */
    transition: all 0.5s;
  }

  :deep(.ss-carousel .slick-dots li.slick-active button) {
    width: 30px;
    height: 10px;
    background: #ffffff;
    border-radius: 10px;
    opacity: 1;
  }
}

.notice_list {
  padding: 10px;
  border-radius: 10px;

  .notice-col {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4d4d4;
  }

  .notice-title {
    width: 95%;
    font-size: 15px;
    color: #7b7b7b;
    margin-left: 5px;
    padding-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
  }
}

.color-icon {
  color: #4d89c7;
}

.Novice-guide {
  // width: 270px;
  line-height: 27px;
  font-size: 14px;
  padding: 5px 10px;
  color: rgb(255, 85, 82);

  .Novice-guide-text {
    margin-left: 3px;
    // color: rgb(255, 85, 82);
    font-weight: 400;
    font-size: 14px;
    color: #4e5969;
    display: flex;
    align-items: center;
  }

  .red-text {
    color: #ff5454;
    font-weight: 700;
  }

  .clickable {
    cursor: pointer;
  }
}

.custom-title-blue {
  font-size: 14px;
  color: #2878ff;
  margin-left: 10px;
  cursor: pointer;
}

.custom-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  .custom-box-left {
    display: flex;

    .custom-box-left-text {
      margin-left: 5px;

      .one-title {
        font-size: 16px;
        font-weight: 700;
      }

      .two-url {
        color: #2878ff;
        border-bottom: 1px solid #2878ff;
        cursor: pointer;
      }
    }
  }
}

.custom-box:last-child {
  margin-bottom: 0px;
}

.popular-courses-con {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.popular-courses {
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;

  .popular-col {
    flex: 0 0 25%;

    .courses-image {
      width: 100%;
      height: 240px;
      border-radius: 16px;
      object-fit: cover;
      cursor: pointer;
    }

    .text {
      margin-top: 5px;
      margin: 10px 0;
    }

    .badge {
      cursor: pointer;
      position: absolute;
      top: 0px;
      right: 16px;
      width: 90px;
      height: 32px;
      background: rgb(255, 101, 98);
      color: #fff;
      border-radius: 0 16px;
      padding: 5px 20px;
      font-weight: 500;
      font-size: 12px;
    }
  }
}

.btn-bg {
  background: linear-gradient(125deg, #2878ff 18%, #ff9165 80%);
  color: #fff;
}

.date-list {
  width: 208px;
  height: 32px;
  background-color: #f6f6f8;
  display: flex;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 24px;
  color: #999999;

  .date-btn {
    background: #fff;
    // padding: 2px 0;
    border-radius: 12px;
    color: #333333;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
  }
}

.start_work_index {
  // padding: 10px 30px;
  background-color: #f6f7f9;

  .info {
    // margin-top: 10px;
    width: 100%;
    // background: url(../../../common/image/workShotstackImage/shotstack_index_static_back.png);
    background-size: 100% 100%;
    // padding-top: 10px;
    border-radius: 10px;

    .info-item {
      .info-data {
        width: 100%;
        height: 90px;
        padding: 20px 15px;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;

        .info-title {
          font-weight: 600;
          font-size: 14px;
          margin-bottom: 5px;
        }

        .info-sub-title {
          font-size: 12px;
          color: #2878ff;
        }

        .info-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
    }
  }

  .column_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;

    .left_swiper {
      background-color: #fff;
      border-radius: 12px;
      width: calc(50% - 14px);
      margin-left: 14px;
      // height: 350px;
      // min-width: 378px;

      .left_swiper_title {
        padding: 22px 15px 0px 15px;
        display: flex;
        margin-bottom: 25px;
        font-weight: 500;
        font-size: 18px;
        color: #3d3d3d;
        line-height: 26px;

        .blue_s {
          width: 4px;
          height: 22px;
          background: #3187f6;
          border-radius: 6px 6px 6px 6px;
          margin-right: 8px;
        }
      }

      .left_swiper_content {
        width: 100%;
        margin-left: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;


        @media (max-width: 1280px) {
          .left_swiper_content_box {
            flex: 0 0 calc(50% - 10px) !important;
          }
        }

        .left_swiper_content_box:hover {
          color: #2878ff;
        }

        .left_swiper_content_box {
          display: flex;
          align-items: center;
          margin-right: 10px;
          margin-bottom: 42px;
          flex: 0 0 calc(33.333% - 10px);
          cursor: pointer;

          .left_swiper_content_text {
            margin-left: 10px;
          }

          .left_swiper_content_box:hover {
            color: #2878ff;
          }
        }
      }
    }

    // @media (max-width: 1280px) {
    //   .left_swiper_content_box {
    //     flex: 0 0 calc(50% - 10px) !important;
    //     /* 在1200px以下变为二等分 */
    //   }
    // }

    .data_overflow {
      // background-image: url("@/common/image/workShotstackImage/shotstack_index_static_data.png");
      background-position: bottom;
      background-size: 100% 50%;
      background-repeat: no-repeat;
    }

    .right_data {
      width: calc(50% - 24px);
      margin-right: 14px;
      // height: 350px;
      background-color: #fff;
      padding: 6px 10px;
      border-radius: 10px;

      .top_con {
        width: 100%;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25px 32px 10px 10px;

        .top_con_left {
          display: flex;
          margin-top: 5px;
        }

        .blue_s {
          width: 4px;
          height: 22px;
          background: #3187f6;
          border-radius: 6px 6px 6px 6px;
          margin-right: 8px;
        }

        .left_title {
          font-weight: 500;
          font-size: 18px;
          color: #3d3d3d;
          line-height: 26px;
          display: flex;
          align-items: center;
          .one {
            width: 80px;
          }
          .three {
            margin-left: 5px;
          }
        }

        .right_choose {
          color: #333;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc(100% - 120px);

          .left_tab {
            display: flex;
            align-items: center;
          }

          .right_tab {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            .tab_item {
              flex-basis: 0;
              flex-grow: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #ac7e7d;
              padding: 3px;

              &.active {
                background-color: rgba(194, 194, 194, 1);
                color: #ff5254;
              }
            }
          }
        }
      }

      .main_con {
        margin-top: 32px;
        // margin-left: 32px;
        // margin: 47px 32px 0 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-left: 20px;

        @media (max-width: 1280px) {
          .static_item {
            flex: calc(50%) !important;
          }
        }

        .static_item {
          // display: flex;
          flex-basis: calc(33.333%);

          .static_item_box {
            display: flex;
            margin-bottom: 50px;

            .static_item_left {
              margin-right: 15px;
            }
          }

          .static_value {
            font-size: 16px;
            font-weight: bold;
          }

          .static_title {
            color: #888888;
            font-size: 14px;
          }
        }
      }
    }
  }
}

.New_column_list {
  width: calc(100%-24px);
  height: 310px;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  margin: 0 14px;

  .New_column_list_Top {
    // margin: 19px 0 0 13px;
    padding: 19px 24px 0 13px;
    display: flex;
    justify-content: space-between;

    .New_column_list_Top_left {
      display: flex;
      font-weight: 500;
      font-size: 18px;
      color: #3d3d3d;

      .blue_s {
        width: 4px;
        height: 22px;
        background: #3187f6;
        border-radius: 6px 6px 6px 6px;
        margin-right: 8px;
      }
    }

    .New_column_list_Top_right {
      color: #1e70db;
      cursor: pointer;
    }
  }

  .New_column_list_Content {
    display: flex;
    margin-top: 30px;
    margin-left: 13px;
    margin-right: 13px;

    .New_card {
      position: relative;
      width: calc((100% - 150px) / 8);
      height: 220px;
      background: #d8d8d8;
      border-radius: 12px 12px 12px 12px;
      margin-right: 16px;

      .horver_btn {
        display: flex;
        justify-content: flex-end;
        margin: 3px 5px;
      }
    }
  }
}

.horver_btn :deep(a-button) {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

.horver_btn:hover :deep(a-button) {
  opacity: 1 !important;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px 6px 8px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 12px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  .overlay_one {
    margin-bottom: 2px;
  }
}

.LeftCircleOutlined {
  font-size: 20px;
  margin-right: 13px;
  color: #88b4fd;
  display: flex;
  align-items: center;
}

.RightCircleOutlined {
  font-size: 20px;
  color: #88b4fd;
  display: flex;
  align-items: center;
}

.myDiv_F_box {
  // display: grid;
  // grid-template-columns: repeat(3, 1fr);
  // gap: 20px;
  padding-left: 18px;
  display: flex;
  color: #fff;
  border-radius: 10px;
  width: 100%;
}

.myDiv_F {
  // width: 34%;
  // height: 188px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin-right: 10px;

  .myDiv_F_btn {
    position: absolute;
    top: 70%;
    left: 9%;
    border-radius: 5px;
    border: none;
    z-index: 11 !important;
    transition: transform 0.3s;
    cursor: pointer;
    background-color: #fff;
    padding: 4px 22px;
    border-radius: 30px;
    font-size: 14px;
  }

  .myDiv_F_h1 {
    position: absolute;
    top: 18%;
    left: 9%;
    font-size: 1.4rem;
    color: #fff;
    transition: transform 0.3s;
  }

  .myDiv_F_p {
    width: 42%;
    position: absolute;
    top: 39%;
    left: 9%;
    transition: transform 0.3s;
    color: #fff;
    font-size: 0.754rem;
  }
}

@media (min-width: 2070px) {
  .myDiv_F_btn {
    // font-size: 1rem !important;
  }

  .myDiv_F_h1 {
    font-size: 1.8rem !important;
  }

  .myDiv_F_p {
    font-size: 0.87rem !important;
  }
}

@media (min-width: 2100px) {
  .myDiv_F_btn {
    // font-size: 1.2rem !important;
  }

  .myDiv_F_h1 {
    font-size: 2rem !important;
  }

  .myDiv_F_p {
    font-size: 0.95rem !important;
  }
}

@media (min-width: 2490px) {
  .myDiv_F_btn {
    // font-size: 1.2rem !important;
  }

  .myDiv_F_h1 {
    font-size: 2.1rem !important;
  }

  .myDiv_F_p {
    font-size: 1.04rem !important;
  }
}

.myDiv_F img {
  // width: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  margin-top: 10px;
  height: calc(100% - 10px);
}

.myDiv_F:hover .myDiv_F_img,
.myDiv_F:hover .myDiv_F_btn,
.myDiv_F:hover .myDiv_F_h1,
.myDiv_F:hover .myDiv_F_p {
  transform: translateY(-5px);
}

.myDiv_F_img,
.myDiv_F_btn {
  transition: transform 0.3s ease;
  /* 添加过渡效果，使移动更平滑 */
}

.myDiv_F_btn:hover {
  transform: translateY(-5px);
}

@media (min-width: 7000px) {
  .myDiv_F_box {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 当屏幕宽度在1200px及以下时，调整为两列布局 */
@media (max-width: 1280px) {
  .myDiv_F_box {
    grid-template-columns: repeat(2, 1fr);
  }
}

.input-button {
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 999 !important;
}

.New_card:hover :deep(.input-button) {
  opacity: 1 !important;
}

.video-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 12px;
  background-color: #000;

  video {
    width: 100%;
  }
}

/* 调整video自身以适应容器 */
// .video-overlay video {
//   width: 100%;
//   height: auto;
//   object-fit: cover;
// }

.gonggao_more {
  margin-left: 10px;
  font-size: 12px;
  cursor: pointer;
  color: #999;
}
.gonggao_more:hover {
  color: #3846f6;
}

.title_blue:hover {
  color: #3846f6;

}

/* 定义淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}


@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.marquee {
    width: 25%;
    overflow: hidden;
    position: relative;
}

.marquee-content {
    display: flex;
    // animation: scroll 10s linear infinite;
    // animation-delay: 1s; /* 延迟 3 秒 */
}

.marquee-content span {
    // padding: 0 2rem;
    white-space: nowrap;
    font-size: 0.85rem;
    line-height: 2rem;
    color: #333;
}

@keyframes scroll {
  0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.footer{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>
